<template>
  <el-dialog title="" :modal="false" class="el-dialog__header add-device-dialog"
    :visible.sync="createDevice.createShowVisiable" :close-on-click-modal="false" top="20%" width="21%"
    :before-close="handleCloseAddDevice" :show-close="false">
    <template slot="title">
      <div style="display:flex;justify-content:space-between;align-items:center;">
        <p class="dialog-title">添加设备模板</p>
        <div style="display:flex;justify-content:flex-start;align-items:center;">
          <div class="addDataBtnBox" @click="handleAddDevice()"><i class="el-icon-check" /></div>
          <div class="addDataBtnCloseBox" @click="handleAddDevice()"><i class="el-icon-close" /></div>
        </div>
      </div>
    </template>
    <div class="edit-panorama-body">
      <div class="upload-name-box">
        <p class="panorama-name">选择图标：</p>
        <div
          style="width:35px;height:35px;margin-left:5px;cursor: pointer;display:flex;justify-content:center;align-items:center;"
          :class="{ selected: createDevice.createIconIndex === index }" @click="selectDeviceIcon(index)"
          v-for="item, index in createDevice.createIconArray" :key="index">
          <img style="width:20px;height:20px;cursor: pointer;" :src="item" alt="">
        </div>
      </div>
      <div class="upload-name-box" style="position: relative;">
        <p class="panorama-name" style="color:#1890ff;cursor: pointer;" @click="handleAddDeviceChooseIcu()">选择设备</p>
        <p class="panorama-name" style="color:#1890ff;cursor: pointer;margin-left: 50px;"
          @click="handleAddDeviceTemplate()">选择模板</p>
      </div>
    </div>
  </el-dialog>
</template>
<script>
</script>
<style scoped>
.addDataBtnBox {
  margin-right: 15px;
  z-index: 999;
}
</style>
<script>
1. 添加（增）
你已经实现了这个，参考如下即可：

js
Copy
Edit
const labelFeature = {
  type: 'Feature',
  geometry: {
    type: 'Point',
    coordinates: [this.eventMap.lngLat.lng, this.eventMap.lngLat.lat]
  },
  properties: {
    label: this.createSpaceData.spaceIDName
  }
};

const source = this.map.getSource('label-source');
const oldData = source._data || { type: 'FeatureCollection', features: [] };
const newData = {
  ...oldData,
  features: [...oldData.features, labelFeature]
};
source.setData(newData);



2. 查询（查）
可以通过 map.queryRenderedFeatures 来查询：

① 查询所有当前图层的标签：
js
Copy
Edit
const features = this.map.queryRenderedFeatures({
  layers: ['label-layer']
});
console.log('当前图层所有标签：', features);
② 查询某一点（或区域）下的文字：
js
Copy
Edit
const features = this.map.queryRenderedFeatures(
  [x, y], // 传入屏幕坐标点，如 event.point
  { layers: ['label-layer'] }
);


3. 删除（删）
假设你知道你要删除的标签的 label 名称，可以这样删除：

js
Copy
Edit
const source = this.map.getSource('label-source');
const oldData = source._data || { type: 'FeatureCollection', features: [] };
const filtered = oldData.features.filter(f => f.properties.label !== '要删除的标签名');

source.setData({
  type: 'FeatureCollection',
  features: filtered
});
如果你是点击后要删除某个标签，可以在点击事件里写：

js
Copy
Edit
this.map.on('click', 'label-layer', (e) => {
  const clickedLabel = e.features[0].properties.label;
  const source = this.map.getSource('label-source');
  const oldData = source._data || { type: 'FeatureCollection', features: [] };

  const filtered = oldData.features.filter(f => f.properties.label !== clickedLabel);

  source.setData({
    type: 'FeatureCollection',
    features: filtered
  });

  this.$message.success(`已删除文字标签：${clickedLabel}`);
});


4. 修改（改）
还是类似逻辑，先找到目标标签，然后替换。

假设你要把 "老文字" 改成 "新文字"：

js
Copy
Edit
const source = this.map.getSource('label-source');
const oldData = source._data || { type: 'FeatureCollection', features: [] };

const updated = oldData.features.map(f => {
  if (f.properties.label === '老文字') {
    return {
      ...f,
      properties: {
        ...f.properties,
        label: '新文字'
      }
    };
  }
  return f;
});

source.setData({
  type: 'FeatureCollection',
  features: updated
});
你也可以在点击标签后，弹出一个输入框修改文字内容，然后触发这个逻辑。





</script>